<template>
  <div>
    <div class="public-title">帐户资产</div>
    <div class="flex-box">
      <Card class="money-item">
        <div style="text-align:center">
          <span>帐户余额</span>
          <h3>0.00</h3>
          <img src="../../../assets/img/mange/yue.png">
        </div>
      </Card>

      <Card class="money-item">
        <div style="text-align:center">
          <span>代金券</span>
          <h3>0.00</h3>
          <img src="../../../assets/img/mange/yue5.png">
        </div>
      </Card>
      <Badge text="new">
        <Card class="money-item">
          <div style="text-align:center">
            <span>优惠券</span>
            <h3>0.00</h3>
            <img src="../../../assets/img/mange/yue4.png">
          </div>
        </Card>
      </Badge>
    </div>
    <br>
    <div class="public-title">帐户充值</div>
    <div class="recharge">
      <RadioGroup v-model="rechargeVal" type="button" size="large">
        <Radio label="100元"></Radio>
        <Radio label="200元"></Radio>
        <Radio label="300元"></Radio>
        <Radio label="400元"></Radio>
      </RadioGroup>
    </div>
    <br>
    <div class="public-title">支付方式</div>
    <div class="pay-type">
      <!--微信支付 -->
      <div class="pay-type-items wechat-type active">
        <img src="../../../assets/img/mange/wechat-ico.jpg">
      </div>
      <!--支付宝支付 -->
      <div class="pay-type-items alipay-type">
        <img src="../../../assets/img/mange/alipay-ico.jpg">
      </div>
      <!-- <div class="pay-type-items wechat-type active">
                <img src="../img/sl-ico.jpg" />
            </div> -->
      <!--<div class="pay-type-items coupon-type">
                用优惠券  >>
            </div>-->
    </div>
    <br>
    <div class="public-title">充值历史</div>
    <div class="payHistory">
      <Table :columns="columns" :data="payHistory"></Table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rechargeVal: "100",
      columns: [
        {
          title: "时间",
          key: "date"
        },
        {
          title: "金额",
          key: "money"
        },
        {
          title: "操作",
          key: "type"
        }
      ],
      payHistory: [
        {
          name: "John Brown",
          money: 18,
          type: "帐户充值",
          date: "2018-07-24 17:00:31"
        },
        {
          name: "Jim Green",
          money: 24,
          type: "帐户充值",
          date: "2018-07-24 17:00:31"
        },
        {
          name: "Joe Black",
          money: 30,
          type: "帐户充值",
          date: "2018-07-24 17:00:31"
        },
        {
          name: "Jon Snow",
          money: 26,
          type: "帐户充值",
          date: "2018-07-24 17:00:31"
        }
      ]
    };
  }
};
</script>

<style scoped>
.flex-box {
  display: flex;
}
.money-item {
  width: 100px;
  display: inline-block;
  margin-left: 20px;
}
.money-item img {
  width: 50%;
}
.recharge {
  margin-left: 20px;
}
.recharge ul {
  display: flex;
}
.recharge li {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 16px;
}
.ivu-radio-group-button.ivu-radio-group-large .ivu-radio-wrapper {
  margin-right: 20px;
}
/* pay-type */
.pay-type {
  margin-left: 20px;
}
.pay-type-items.active {
  border-color: #3d6cc8;
}
.pay-type-items {
  width: 160px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  display: inline-block;
  border: 1px solid #dcdcdc;
  margin-right: 30px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: 0.5s;
}
.pay-type-items:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.pay-type-items img {
  vertical-align: middle;
  width: 93%;
}
.alipay-type img {
  width: 80%;
}
</style>